<%@page contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>下拉树示例</title>
		<cw:base />
		<script type="text/javascript">
		var json =
			[
			{"text" : "安徽省", "id" : 200, "leaf" : false, "cls" : "folder", "children" : [
			{"text" : "黄山市", "id" : 201, "leaf" : true, "cls" : "file"},
			{"text" : "淮北市", "id" : 202, "leaf" : true, "cls" : "file"},
			{"text" : "巢湖市", "id" : 241, "leaf" : true, "cls" : "file"},
			{"text" : "六安市", "id" : 242, "leaf" : true, "cls" : "file"}]
			},
			{"text" : "山东省", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
			{"text" : "潍坊市", "id" : 101, "leaf" : true, "cls" : "file"},
			{"text" : "泰安市", "id" : 102, "leaf" : true, "cls" : "file"},
			{"text" : "日照市", "id" : 141, "leaf" : true, "cls" : "file"},
			{"text" : "烟台市", "id" : 142, "leaf" : true, "cls" : "file"}]
			},
			{"text" : "江西省", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [
			{"text" : "上饶市", "id" : 301, "leaf" : true, "cls" : "file"},
			{"text" : "鹰潭市", "id" : 302, "leaf" : true, "cls" : "file"},
			{"text" : "九江市", "id" : 341, "leaf" : true, "cls" : "file"}]
			},
			{"text" : "湖北省", "id" : 410, "leaf" : false, "cls" : "folder", "children" : [
			{"text" : "荆州市", "id" : 411, "leaf" : true, "cls" : "file"},
			{"text" : "武汉市", "id" : 412, "leaf" : true, "cls" : "file"}]
			},
			{"text" : "广东省", "id" : 510, "leaf" : false, "cls" : "folder", "children" : [
			{"text" : "肇庆市", "id" : 511, "leaf" : true, "cls" : "file"},
			{"text" : "汕头市", "id" : 512, "leaf" : true, "cls" : "file"}]
			},
			{"text" : "上海市", "id" : 134, "leaf" : true, "cls": "folder"},
			{"text" : "四川省", "id" : 135, "leaf" : true, "cls": "folder"},
			{"text" : "江苏省", "id" : 136, "leaf" : true, "cls": "folder"}
			];
    </script>
	</head>
	<body>
		<cw:form id="form" url="../../../../sample/form/submitTreeSelect.action">
		<li>
			<b> 树型下拉框是在列表下拉框的基础上对下拉列表的内容进行树型化扩展而来的一种高级下拉框，即选项本身具有上下级的关系。 </b>
		</li>
		<li>
			<b> 需指定树模型、数据源，同时指定值域和名称域 </b>
		</li>
		<li>
			<b> 以下示例展现的是基于不同数据源加载方式的下拉树</b>
		</li>
		<br />
			<li>
				对树节点可以进行多项选择，选择成功后通过点击下面的“确定”按钮选中节点，数据格式为value1,value2
				<table>
					<tr>
						<td>
							多选树(数据为远程数据):
						</td>
						<td>
							<cw:treeSelect property="city" multiSelect="true" width="200" emptyText="请选择...">
								<cw:tree height="200" width="300" id="tree" urlParams="{type:1}" animate="false" rootVisible="false"
									url="../../../../sample/tree/query.action" />
							</cw:treeSelect>
						</td>
					</tr>
				</table>
				<br>
			</li>
			<li>
				对树节点可以进行单项选择，数据为静态数据
				<table>
					<tr>
						<td>
							单选树(数据为静态数据):
						</td>
						<td>
							<cw:treeSelect property="city1" multiSelect="false">
								<cw:tree height="200" width="300" data="json" />
							</cw:treeSelect>
						</td>
					</tr>
				</table>
				<br>
			</li>
			<li>
				对树节点可以进行单项选择，数据为动态数据
				<table>
					<tr>
						<td>
							单选树(动态):
						</td>
						<td>
							<cw:treeSelect property="city2" multiSelect="false">
								<cw:tree height="200" width="300" url="../../../../sample/tree/fullTreeQuery.action" />
							</cw:treeSelect>
						</td>
					</tr>
				</table>
				<br>
			</li>
			<li>
				包含下拉树的表单加载和提交
				<table>
					<tr>
						<td>
							<cw:button text="加载数据" onclick="loadTreeSelect()"></cw:button>
						</td>
						<td>
							<cw:formButton actionType="submit" formId="form" />
						</td>
					</tr>
				</table>
				<br>
			</li>
		</cw:form>
		<script type="text/javascript">
			function loadTreeSelect(){
			    Wonders.utils.formLoad('form','../../../../sample/form/loadTreeSelect.action',null,null,'加载成功!');
			}
	</script>
	</body>
	<cw:theme></cw:theme>
</html>
